<template>
    <div>
      <div ref="columnar" style="width: 100%; height: 300px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import {breed} from '../../../api/api'
  export default {
    props: {
      breedData: {
      type: Array,
      default: () => [],
    },
    form: {
      typere: Object,
      default: () => {},
    },
    drr1: {
      type: Array,
      default: () => [],
    },
    drr2: {
      type: Array,
      default: () => [],
    },
    drr3: {
      type: Array,
      default: () => [],
    },
    drr4: {
      type: Array,
      default: () => [],
    },
  },
    data() {
      return {
        chartIndata:null,
        user: JSON.parse(localStorage.getItem("user")),
      };
    },
    mounted() {
      this.getdataSource();
    },
    watch: {
      breedData: {
      immediate: true,
      handler(newLegendData) {
        if (this.chartIndata) {
          this.chartIndata.setOption({
            legend: {
              data: newLegendData,
            },
          });
        }
      },
    },
  },
    methods: {
    async  getdataSource() {
        const arr = this.form.xmld1.concat(
        this.form.xmld2,
        this.form.xmld3,
        this.form.xmld4
      );
      const brr = this.drr1.concat(this.drr2, this.drr3, this.drr4);
      const params = {
        area: this.user.role == "xian" ? this.user.fkDept : this.form.area,
        city:this.user.role == "xian" || this.user.role == "shi" ? this.user.fkDept.slice(0, 4) : "3700",
        types: "",
        xmlds: "",
        xmxls: "",
        jsrq: this.form.endtime,
        ksrq: this.form.begintime,
        sblx: this.form.sblx,
        xmjd: this.form.xmjd,
        type: this.form.type.length == 0 ? "" : this.form.type.join(","),
        keyWord: this.form.keyWord,
        xmld: brr.length == 0 ? "" : brr.join(","),
        xmxl: arr.length == 0 ? "" : arr.join(","),
      };


      const data = await breed(params);
      var cityname = data.result.map((item) => item.cityname);
      var qlsyndtmj;//禽类用地总面积
      var  clsyndtmj;//畜类用地总面积
      var scsyndtmj;//水产用地总面积
      if (this.form.isyznum == 1)
      {
        qlsyndtmj = data.result.map((item) => item.qlSyndtmj);
        clsyndtmj =  data.result.map((item) => item.clSyndtmj);
        scsyndtmj = data.result.map((item) => item.scSyndtmj);
      }else
      {
        qlsyndtmj = data.result.map((item) => item.qlSyndtmjC);
        clsyndtmj =  data.result.map((item) => item.clSyndtmjC);
        scsyndtmj = data.result.map((item) => item.scSyndtmjC);
      }

        this.chartIndata = echarts.init(this.$refs.columnar);
        let option = {
          xAxis: {
              axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: -45, // 将标签旋转 45 度
              },
            type: "category",
            data: cityname,
          },
          legend: {
            data:this.breedData,
          },
          tooltip: {
              trigger: "axis",
            },
          calculable: true,
          yAxis: {
            type: "value",
          },
          toolbox: {
            show: true,
          },
          
          calculable: true,
          series: [
            {
              name: this.breedData[0],
              data: qlsyndtmj,
              type: "bar",
              color:'#F86c6c',
              barWidth: '20'
            },
            {
              name: this.breedData[1],
              data: clsyndtmj,
              type: "bar",
              color:'#7dd2f3' ,
              barWidth: '20' 
            },
            {
              name: this.breedData[2],
              data: scsyndtmj,
              type: "bar",
              color:'pink',
              barWidth: '20' 
            },
          ],
          grid: {
                  x: 30,
                  y: 50,
                  x2: 30,
                  y2: 35
                },
        };
        this.chartIndata .setOption(option);
          //窗口缩放后重新调整图标尺寸
          window.onresize = function (){
            this.chartIndata.resize();
              }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  </style>